<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item label="产品系列" prop="series">
              <el-input v-model="queryParams.series" placeholder="请输入产品系列" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="产品完整名称" prop="productname">
              <el-input v-model="queryParams.productname" placeholder="请输入产品完整名称" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="计量单位" prop="unit">
              <el-input v-model="queryParams.unit" placeholder="请输入计量单位" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>

    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:products:add']">新增 </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:products:edit']"
              >修改
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:products:remove']"
              >删除
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:products:export']">导出 </el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>

      <el-table v-loading="loading" border :data="productsList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="图片" align="center" prop="imgaddress" width="200px">
          <template #default="scope">
            <el-image style="width: 100px; height: 100px" :src="scope.row.imgaddress" :preview-src-list="[scope.row.imgaddress]"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="产品系列" align="center" prop="series" />
        <el-table-column label="产品型号" align="center" prop="modeltype" width="200px" />
        <el-table-column label="产品名称" align="center" prop="productname" width="200px" />
        <el-table-column label="计量单位" align="center" prop="unit" />
        <!--        <el-table-column label="库存状态" align="center" prop="stockstatus" />-->
        <el-table-column label="总重量" align="center" prop="grossweight" />
        <el-table-column label="总数量" align="center" prop="grossquantity" />
        <el-table-column label="默认保修期(年)" align="center" prop="defaultwarranty" />
        <el-table-column label="交货日期(天)" align="center" prop="deliverydate" />
        <el-table-column label="安装方式" align="center" prop="mountmethod" />
        <el-table-column label="尺寸" align="center" prop="size" />
        <el-table-column label="载重能力" align="center" prop="loadCapacity" />
        <el-table-column label="高度" align="center" prop="height" />
<!--        <el-table-column label="旋转半径" align="center" prop="gyrationradius" />-->
<!--        <el-table-column label="省力评分" align="center" prop="saveeffortscore" />-->
<!--        <el-table-column label="耐磨寿命评分" align="center" prop="wearlifescore" />-->
<!--        <el-table-column label="静音效果评分" align="center" prop="muteeffectscore" />-->
<!--        <el-table-column label="地面保护评分" align="center" prop="groundprotectionscore" />-->
<!--        <el-table-column label="3D图片URL地址" align="center" prop="img3daddress" />-->
<!--        <el-table-column label="3D图片压缩包URL" align="center" prop="img3daddresszip" />-->
<!--        <el-table-column label="3D图片文件" align="center" prop="img3dfile" />-->
<!--        <el-table-column label="CAD图片URL地址" align="center" prop="cadimgaddress" />-->
<!--        <el-table-column label="轮子名称" align="center" prop="wheelname" />-->
<!--        <el-table-column label="轮子材质" align="center" prop="wheelmaterial" />-->
<!--        <el-table-column label="核心材质" align="center" prop="corematerial" />-->
<!--        <el-table-column label="轴承类别" align="center" prop="bearingcategory" />-->
<!--        <el-table-column label="轴承类型" align="center" prop="bearingtype" />-->
<!--        <el-table-column label="表面硬度" align="center" prop="surfacehardness" />-->
<!--        <el-table-column label="表面形状" align="center" prop="surfaceshape" />-->
<!--        <el-table-column label="表面颜色" align="center" prop="surfacecolour" />-->
<!--        <el-table-column label="宽度" align="center" prop="width" />-->
<!--        <el-table-column label="设计速度" align="center" prop="designspeed" />-->
<!--        <el-table-column label="保护罩" align="center" prop="protectivecover" />-->
<!--        <el-table-column label="温度上限" align="center" prop="upperlimittemperature" />-->
<!--        <el-table-column label="温度下限" align="center" prop="lowerlimittemperature" />-->
<!--        <el-table-column label="最佳温度下限" align="center" prop="lowoptimumtemperature" />-->
<!--        <el-table-column label="最佳温度上限" align="center" prop="highoptimumtemperature" />-->
<!--        <el-table-column label="轮子介绍" align="center" prop="wheelintroduction" />-->
<!--        <el-table-column label="轮子图片ID" align="center" prop="wheelimg" />-->
<!--        <el-table-column label="轮子图片URL" align="center" prop="wheelimgaddress" />-->
<!--        <el-table-column label="表面处理" align="center" prop="surfacetreatment" />-->
<!--        <el-table-column label="盐雾测试结果" align="center" prop="saltyspray" />-->
<!--        <el-table-column label="转向结构" align="center" prop="steeringstructure" />-->
<!--        <el-table-column label="刹车结构" align="center" prop="brakestructure" />-->
<!--        <el-table-column label="旋转半径" align="center" prop="swivelradius" />-->
<!--        <el-table-column label="偏心率" align="center" prop="eccentricity" />-->
<!--        <el-table-column label="翼厚度" align="center" prop="wingthickness" />-->
<!--        <el-table-column label="安装高度" align="center" prop="mountheight" />-->
<!--        <el-table-column label="平板安装尺寸" align="center" prop="platemountsize" />-->
<!--        <el-table-column label="平板安装孔径" align="center" prop="platemountaperture" />-->
<!--        <el-table-column label="平板厚度" align="center" prop="platethickness" />-->
<!--        <el-table-column label="平板尺寸" align="center" prop="platesize" />-->
<!--        <el-table-column label="支架介绍" align="center" prop="bracketintroduction" />-->
<!--        <el-table-column label="支架图片URL" align="center" prop="bracketimgaddress" />-->
<!--        <el-table-column label="类别代码" align="center" prop="categorycode" />-->
<!--        <el-table-column label="安装方式代码" align="center" prop="mountmethodcode" />-->
<!--        <el-table-column label="安装方式图片URL" align="center" prop="mountmethodimgaddress" />-->
<!--        <el-table-column label="产品路径名称" align="center" prop="productpathName" />-->
<!--        <el-table-column label="产品分类名称" align="center" prop="productpathClassifyname" />-->
<!--        <el-table-column label="产品系列名称" align="center" prop="productpathSeriesname" />-->
<!--        <el-table-column label="产品路径系列" align="center" prop="productpathSeries" />-->
<!--        <el-table-column label="产品路径轮子材质" align="center" prop="productpathWheelmaterial" />-->
<!--        <el-table-column label="产品路径表面颜色" align="center" prop="productpathSurfacecolour" />-->
<!--        <el-table-column label="产品路径缩写" align="center" prop="productpathAbbreviation" />-->
<!--        <el-table-column label="路径字符串" align="center" prop="pathstr" />-->
        <el-table-column label="产品分类标识" align="center" prop="clpcl" />
        <el-table-column label="状态" align="center" prop="status" />
        <el-table-column label="备注" align="center" prop="remark" />
        <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="修改" placement="top">
              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:products:edit']"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:products:remove']"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>
    <!-- 添加或修改主产品信息，存储脚轮产品的基本属性对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="60%" append-to-body>
      <el-form ref="productsFormRef" :model="form" :rules="rules" label-width="150px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="产品分类" prop="clpcl">
              <el-select v-model="form.clpcl" placeholder="产品分类" clearable>
                <el-option v-for="dict in structureListList" :key="dict.codeSerial" :label="dict.codeName" :value="dict.codeSerial" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品系列" prop="series">
              <el-input v-model="form.series" placeholder="请输入产品系列" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="轮子名称" prop="wheelname">
              <el-input v-model="form.wheelname" placeholder="请输入轮子名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="轮子材质" prop="wheelmaterial">
              <el-select v-model="form.wheelmaterial" placeholder="轮子材质" clearable>
                <el-option v-for="dict in corePvcWheelsList" :key="dict.id" :label="dict.clplbmc" :value="dict.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="查询类型" prop="bearingtype">
              <el-input v-model="form.bearingtype" placeholder="请输入查询类型" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品完整名称" prop="productname">
              <el-input v-model="form.productname" placeholder="请输入产品完整名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品型号" prop="modeltype">
              <el-input v-model="form.modeltype" placeholder="请输入产品型号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计量单位" prop="unit">
              <el-input v-model="form.unit" placeholder="请输入计量单位" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="总重量" prop="grossweight">
              <el-input v-model="form.grossweight" placeholder="请输入总重量" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="总数量" prop="grossquantity">
              <el-input v-model="form.grossquantity" placeholder="请输入总数量" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="默认保修期(年)" prop="defaultwarranty">
              <el-input v-model="form.defaultwarranty" placeholder="请输入默认保修期(年)" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="交货日期(天)" prop="deliverydate">
              <el-input v-model="form.deliverydate" placeholder="请输入交货日期(天)" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="安装方式" prop="mountmethod">
              <el-input v-model="form.mountmethod" placeholder="请输入安装方式" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="尺寸" prop="size">
              <el-input v-model="form.size" placeholder="请输入尺寸" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="载重能力" prop="loadCapacity">
              <el-input v-model="form.loadCapacity" placeholder="请输入载重能力" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="高度" prop="height">
              <el-input v-model="form.height" placeholder="请输入高度" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="旋转半径" prop="gyrationradius">
              <el-input v-model="form.gyrationradius" placeholder="请输入旋转半径" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="省力评分" prop="saveeffortscore">
              <el-input v-model="form.saveeffortscore" placeholder="请输入省力评分" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="耐磨寿命评分" prop="wearlifescore">
              <el-input v-model="form.wearlifescore" placeholder="请输入耐磨寿命评分" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="静音效果评分" prop="muteeffectscore">
              <el-input v-model="form.muteeffectscore" placeholder="请输入静音效果评分" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="地面保护评分" prop="groundprotectionscore">
              <el-input v-model="form.groundprotectionscore" placeholder="请输入地面保护评分" />
            </el-form-item>
          </el-col>




          <el-col :span="8">
            <el-form-item label="核心材质" prop="corematerial">
              <el-input v-model="form.corematerial" placeholder="请输入核心材质" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="轴承类别" prop="bearingcategory">
              <el-input v-model="form.bearingcategory" placeholder="请输入轴承类别" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="表面硬度" prop="surfacehardness">
              <el-input v-model="form.surfacehardness" placeholder="请输入表面硬度" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="表面形状" prop="surfaceshape">
              <el-input v-model="form.surfaceshape" placeholder="请输入表面形状" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="表面颜色" prop="surfacecolour">
              <el-input v-model="form.surfacecolour" placeholder="请输入表面颜色" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="宽度" prop="width">
              <el-input v-model="form.width" placeholder="请输入宽度" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设计速度" prop="designspeed">
              <el-input v-model="form.designspeed" placeholder="请输入设计速度" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="保护罩" prop="protectivecover">
              <el-input v-model="form.protectivecover" placeholder="请输入保护罩" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="温度上限" prop="upperlimittemperature">
              <el-input v-model="form.upperlimittemperature" placeholder="请输入温度上限" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="温度下限" prop="lowerlimittemperature">
              <el-input v-model="form.lowerlimittemperature" placeholder="请输入温度下限" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="最佳温度下限" prop="lowoptimumtemperature">
              <el-input v-model="form.lowoptimumtemperature" placeholder="请输入最佳温度下限" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="最佳温度上限" prop="highoptimumtemperature">
              <el-input v-model="form.highoptimumtemperature" placeholder="请输入最佳温度上限" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="轮子介绍" prop="wheelintroduction">
              <el-input v-model="form.wheelintroduction" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="表面处理" prop="surfacetreatment">
              <el-input v-model="form.surfacetreatment" placeholder="请输入表面处理" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="盐雾测试结果" prop="saltyspray">
              <el-input v-model="form.saltyspray" placeholder="请输入盐雾测试结果" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="转向结构" prop="steeringstructure">
              <el-input v-model="form.steeringstructure" placeholder="请输入转向结构" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="刹车结构" prop="brakestructure">
              <el-input v-model="form.brakestructure" placeholder="请输入刹车结构" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="旋转半径" prop="swivelradius">
              <el-input v-model="form.swivelradius" placeholder="请输入旋转半径" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="偏心率" prop="eccentricity">
              <el-input v-model="form.eccentricity" placeholder="请输入偏心率" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="翼厚度" prop="wingthickness">
              <el-input v-model="form.wingthickness" placeholder="请输入翼厚度" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="安装高度" prop="mountheight">
              <el-input v-model="form.mountheight" placeholder="请输入安装高度" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="平板安装尺寸" prop="platemountsize">
              <el-input v-model="form.platemountsize" placeholder="请输入平板安装尺寸" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="平板安装孔径" prop="platemountaperture">
              <el-input v-model="form.platemountaperture" placeholder="请输入平板安装孔径" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="平板厚度" prop="platethickness">
              <el-input v-model="form.platethickness" placeholder="请输入平板厚度" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="平板尺寸" prop="platesize">
              <el-input v-model="form.platesize" placeholder="请输入平板尺寸" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="支架介绍" prop="bracketintroduction">
              <el-input v-model="form.bracketintroduction" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="类别代码" prop="categorycode">
              <el-input v-model="form.categorycode" placeholder="请输入类别代码" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="安装方式代码" prop="mountmethodcode">
              <el-input v-model="form.mountmethodcode" placeholder="请输入安装方式代码" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="产品路径名称" prop="productpathName">
              <el-input v-model="form.productpathName" placeholder="请输入产品路径名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品系列名称" prop="productpathSeriesname">
              <el-input v-model="form.productpathSeriesname" placeholder="请输入产品系列名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品路径系列" prop="productpathSeries">
              <el-input v-model="form.productpathSeries" placeholder="请输入产品路径系列" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品路径轮子材质" prop="productpathWheelmaterial">
              <el-input v-model="form.productpathWheelmaterial" placeholder="请输入产品路径轮子材质" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品路径表面颜色" prop="productpathSurfacecolour">
              <el-input v-model="form.productpathSurfacecolour" placeholder="请输入产品路径表面颜色" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品路径缩写" prop="productpathAbbreviation">
              <el-input v-model="form.productpathAbbreviation" placeholder="请输入产品路径缩写" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="路径字符串" prop="pathstr">
              <el-input v-model="form.pathstr" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="图片" prop="imgaddress">
              <image-upload v-model="form.imgaddress" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="3D图片压缩包" prop="img3daddresszip">
              <image-upload v-model="form.img3daddresszip" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="3D图片文件" prop="img3dfile">
              <image-upload v-model="form.img3dfile" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="3D图片" prop="img3daddress">
              <image-upload v-model="form.img3daddress" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="安装方式图片" prop="mountmethodimgaddress">
              <image-upload v-model="form.mountmethodimgaddress" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="CAD图片" prop="cadimgaddress">
              <image-upload v-model="form.cadimgaddress" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="支架图片" prop="bracketimgaddress">
              <image-upload v-model="form.bracketimgaddress" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="轮子图片" prop="wheelimgaddress">
              <image-upload v-model="form.wheelimgaddress" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Products" lang="ts">
import { listProducts, getProducts, delProducts, addProducts, updateProducts } from '@/api/system/products';
import { ProductsVO, ProductsQuery, ProductsForm } from '@/api/system/products/types';
import { listCorePvcWheelsList, listStructureList } from '@/api/system/structureList';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const productsList = ref<ProductsVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();
const productsFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const initFormData: ProductsForm = {
  id: undefined,
  series: undefined,
  modeltype: undefined,
  productname: undefined,
  unit: undefined,
  stockstatus: undefined,
  grossweight: undefined,
  grossquantity: undefined,
  defaultwarranty: undefined,
  deliverydate: undefined,
  mountmethod: undefined,
  size: undefined,
  loadCapacity: undefined,
  height: undefined,
  gyrationradius: undefined,
  saveeffortscore: undefined,
  wearlifescore: undefined,
  muteeffectscore: undefined,
  groundprotectionscore: undefined,
  img: undefined,
  imgaddress: undefined,
  img3d: undefined,
  img3daddress: undefined,
  img3daddresszip: undefined,
  img3dfile: undefined,
  cadimg: undefined,
  cadimgaddress: undefined,
  wheelname: undefined,
  wheelmaterial: undefined,
  corematerial: undefined,
  bearingcategory: undefined,
  bearingtype: undefined,
  surfacehardness: undefined,
  surfaceshape: undefined,
  surfacecolour: undefined,
  width: undefined,
  designspeed: undefined,
  protectivecover: undefined,
  upperlimittemperature: undefined,
  lowerlimittemperature: undefined,
  lowoptimumtemperature: undefined,
  highoptimumtemperature: undefined,
  wheelintroduction: undefined,
  wheelimg: undefined,
  wheelimgaddress: undefined,
  surfacetreatment: undefined,
  saltyspray: undefined,
  steeringstructure: undefined,
  brakestructure: undefined,
  swivelradius: undefined,
  eccentricity: undefined,
  wingthickness: undefined,
  mountheight: undefined,
  platemountsize: undefined,
  platemountaperture: undefined,
  platethickness: undefined,
  platesize: undefined,
  bracketintroduction: undefined,
  bracketimg: undefined,
  bracketimgaddress: undefined,
  categorycode: undefined,
  mountmethodcode: undefined,
  mountmethodimg: undefined,
  mountmethodimgaddress: undefined,
  productpathName: undefined,
  productpathClassifyname: undefined,
  productpathSeriesname: undefined,
  productpathSeries: undefined,
  productpathWheelmaterial: undefined,
  productpathSurfacecolour: undefined,
  productpathAbbreviation: undefined,
  pathstr: undefined,
  clpcl: undefined,
  status: undefined,
  remark: undefined
};
const data = reactive<PageData<ProductsForm, ProductsQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    series: undefined,
    modeltype: undefined,
    productname: undefined,
    unit: undefined,
    stockstatus: undefined,
    grossweight: undefined,
    grossquantity: undefined,
    defaultwarranty: undefined,
    deliverydate: undefined,
    mountmethod: undefined,
    size: undefined,
    loadCapacity: undefined,
    height: undefined,
    gyrationradius: undefined,
    saveeffortscore: undefined,
    wearlifescore: undefined,
    muteeffectscore: undefined,
    groundprotectionscore: undefined,
    img: undefined,
    imgaddress: undefined,
    img3d: undefined,
    img3daddress: undefined,
    img3daddresszip: undefined,
    img3dfile: undefined,
    cadimg: undefined,
    cadimgaddress: undefined,
    wheelname: undefined,
    wheelmaterial: undefined,
    corematerial: undefined,
    bearingcategory: undefined,
    bearingtype: undefined,
    surfacehardness: undefined,
    surfaceshape: undefined,
    surfacecolour: undefined,
    width: undefined,
    designspeed: undefined,
    protectivecover: undefined,
    upperlimittemperature: undefined,
    lowerlimittemperature: undefined,
    lowoptimumtemperature: undefined,
    highoptimumtemperature: undefined,
    wheelintroduction: undefined,
    wheelimg: undefined,
    wheelimgaddress: undefined,
    surfacetreatment: undefined,
    saltyspray: undefined,
    steeringstructure: undefined,
    brakestructure: undefined,
    swivelradius: undefined,
    eccentricity: undefined,
    wingthickness: undefined,
    mountheight: undefined,
    platemountsize: undefined,
    platemountaperture: undefined,
    platethickness: undefined,
    platesize: undefined,
    bracketintroduction: undefined,
    bracketimg: undefined,
    bracketimgaddress: undefined,
    categorycode: undefined,
    mountmethodcode: undefined,
    mountmethodimg: undefined,
    mountmethodimgaddress: undefined,
    productpathName: undefined,
    productpathClassifyname: undefined,
    productpathSeriesname: undefined,
    productpathSeries: undefined,
    productpathWheelmaterial: undefined,
    productpathSurfacecolour: undefined,
    productpathAbbreviation: undefined,
    pathstr: undefined,
    clpcl: undefined,
    status: undefined,
    params: {}
  },
  rules: {
    id: [{ required: true, message: '产品唯一ID不能为空', trigger: 'blur' }],
    series: [{ required: true, message: '产品系列不能为空', trigger: 'blur' }],
    modeltype: [{ required: true, message: '产品型号不能为空', trigger: 'change' }],
    productname: [{ required: true, message: '产品完整名称不能为空', trigger: 'blur' }],
    unit: [{ required: true, message: '计量单位不能为空', trigger: 'blur' }],
    stockstatus: [{ required: true, message: '库存状态不能为空', trigger: 'change' }],
    status: [{ required: true, message: '状态不能为空', trigger: 'change' }]
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询主产品信息，存储脚轮产品的基本属性列表 */
const getList = async () => {
  loading.value = true;
  const res = await listProducts(queryParams.value);
  productsList.value = res.rows;
  total.value = res.total;
  loading.value = false;
};

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
};

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  productsFormRef.value?.resetFields();
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};

/** 多选框选中数据 */
const handleSelectionChange = (selection: ProductsVO[]) => {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = '添加主产品信息，存储脚轮产品的基本属性';
};

/** 修改按钮操作 */
const handleUpdate = async (row?: ProductsVO) => {
  reset();
  const _id = row?.id || ids.value[0];
  const res = await getProducts(_id);
  Object.assign(form.value, res.data);
  dialog.visible = true;
  dialog.title = '修改主产品信息，存储脚轮产品的基本属性';
};

/** 提交按钮 */
const submitForm = () => {
  productsFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.id) {
        await updateProducts(form.value).finally(() => (buttonLoading.value = false));
      } else {
        await addProducts(form.value).finally(() => (buttonLoading.value = false));
      }
      proxy?.$modal.msgSuccess('操作成功');
      dialog.visible = false;
      await getList();
    }
  });
};

/** 删除按钮操作 */
const handleDelete = async (row?: ProductsVO) => {
  const _ids = row?.id || ids.value;
  await proxy?.$modal.confirm('是否确认删除主产品信息，存储脚轮产品的基本属性编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
  await delProducts(_ids);
  proxy?.$modal.msgSuccess('删除成功');
  await getList();
};

/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download(
    'system/products/export',
    {
      ...queryParams.value
    },
    `products_${new Date().getTime()}.xlsx`
  );
};

/** 查询产品类型列表 */
const structureListList = ref([]);
const getCateList = async () => {
  loading.value = true;
  const queryCateParams = {
    pageNum: 1,
    pageSize: 1000
  };
  const res = await listStructureList(queryCateParams);
  structureListList.value = res.rows;
};
const corePvcWheelsList = ref([]);
const getCorePvcWheelsList = async () => {
  loading.value = true;
  const queryCateParams = {
    pageNum: 1,
    pageSize: 1000
  };
  const res = await listCorePvcWheelsList(queryCateParams);
  corePvcWheelsList.value = res.data;
};
onMounted(() => {
  getList();
  getCateList();
  getCorePvcWheelsList();
});
</script>
